<template>
  <div class="myContainer">
    <!-- 头部标题 start -->  
    <el-row class="myHeadeTitle">
      <el-col :span="10" class="myLineHeight_35px">
        维保任务管理
      </el-col>
      <el-col :span="14" class="myTextAlignRight">
        <el-button type="primary" class="myBgGreen" @click="onPush">逾期推送设置</el-button>
        
        <!-- <el-button type="primary" class="myBgGreen" @click="onCount">统计分析</el-button> -->
        <!-- <el-button type="primary" class="myBgGreen">导出</el-button> -->
      </el-col>
    </el-row>
    <!-- 头部标题 end -->
    <!-- 搜索部分 start -->
    <el-row :gutter="10" class="myPaddingTop_10px">
      <el-col :span="3">
        <template>
          <el-cascader
            placeholder="全部项目/小区"
            :options="regionOptions"
            v-model="regionOptSelected"
            ></el-cascader>
          </el-select>
        </template>
      </el-col>
      <el-col :span="3">
        <template>
          <el-select v-model="modelValue" clearable placeholder="全部维保计划">
            <el-option
              v-for="item in tableDataList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="3">
        <template>
          <el-select v-model="planValue" clearable placeholder="全部任务状态">
            <el-option
              v-for="item in planOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="3">
        <template>
          <el-select 
            v-model="date_type"
            clearable
            placeholder="日期">
            <el-option
              v-for="item in timetypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="6">
        <el-date-picker
          v-model="time"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-col>
      <el-col :span="3">
        <el-input placeholder="输入关键字进行查询" v-model="kw"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" class="myBgGreen"  @click="onSearch">查 询</el-button>
      </el-col>
    </el-row>
    <!-- 搜索部分 end -->
    <el-row class="myPaddingTop_10px">
      <el-col :span="24">
        <template>
          <el-table
            border
            stripe
            :data="tableData"
            v-loading="loading"
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table
                  border
                  stripe
                  :data="props.row.rectify_list"
                  style="width: 100%">
                  <el-table-column
                    label="序号"
                    type="index"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    label="名称"
                    prop="name">
                  </el-table-column>
                  <el-table-column
                    width="100"
                    label="状态">
                    <template scope="scope">
                      <span>{{scope.row.status | taskStatusText}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    label="是否逾期">
                    <template scope="scope">
                      <span v-if="scope.row.overdue_days==0">{{scope.row.overdue_days | overdue_days}}</span>
                      <span v-else class="myColorRed">{{scope.row.overdue_days | overdue_days}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="责任人"
                    prop="charge_username">
                  </el-table-column>
                  <el-table-column
                    label="检查人"
                    prop="check_username">
                  </el-table-column>
                  <el-table-column
                    label="执行人"
                    prop="deal_username">
                  </el-table-column>
                  <el-table-column
                    label="任务开始日期"
                    width="120"
                    prop="starttime">
                  </el-table-column>
                  <el-table-column
                    label="任务截止日期"
                    width="120"
                    prop="endtime">
                  </el-table-column>
                  <el-table-column
                    label="所属小区"
                    prop="areaname">
                  </el-table-column>
                  <el-table-column
                    width="100"
                    label="操作">
                    <template scope="scope">
                      <el-button class="look" type="text" size="small" v-if="scope.row.status==5" @click="onInspect(scope.row.id,2)">检查</el-button> 
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              label="序号"
              type="index"
              width="100">
            </el-table-column>
            <el-table-column
              label="名称"
              prop="taskinfo.name">
            </el-table-column>
            <el-table-column
              width="100"
              label="状态">
              <template scope="scope">
                <span>{{scope.row.taskinfo.status | taskStatusText}}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="100"
              label="是否逾期">
              <template scope="scope">
                <span v-if="scope.row.taskinfo.overdue_days==0">{{scope.row.taskinfo.overdue_days | overdue_days}}</span>
                <span v-else class="myColorRed">{{scope.row.taskinfo.overdue_days | overdue_days}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="责任人"
              prop="taskinfo.charge_username">
            </el-table-column>
            <el-table-column
              label="检查人"
              prop="taskinfo.check_username">
            </el-table-column>
            <el-table-column
              label="执行人"
              prop="taskinfo.deal_username">
            </el-table-column>
            <el-table-column
              label="任务开始日期"
              width="120"
              prop="taskinfo.starttime">
            </el-table-column>
            <el-table-column
              label="任务截止日期"
              width="120"
              prop="taskinfo.endtime">
            </el-table-column>
            <el-table-column
              label="所属小区"
              prop="taskinfo.areaname">
            </el-table-column>
            <el-table-column
              label="功能操作"
              width="100">
              <template scope="scope">
                <el-button class="look" type="text" size="small" @click="onDetailed(scope.row.taskinfo.id)">查看</el-button> 
                <span v-if="scope.row.taskinfo.status==2">|</span>
                <el-button class="look" type="text" size="small" v-if="scope.row.taskinfo.status==2" @click="onInspect(scope.row.taskinfo.id,1)">检查</el-button> 
                <span  v-if="scope.row.taskinfo.deal_userid==null">|</span>
                <el-button class="look" type="text" size="small" v-if="scope.row.taskinfo.deal_userid==null && isShow(238)" @click="onAssign(scope.row.taskinfo.id)">指派</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 分页控件 start -->
        <div class="block">                    
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page_num"
            :page-sizes="[10, 15]"
            :page-size="page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <!-- 分页控件 end -->
      </el-col>
    </el-row>


    <!--指派人员弹出框 start-->
    <el-dialog title="指派执行人员" class="myRoleDialog" :visible.sync="newRoleDialogVisible" >
      <el-row :gutter="10">
        <el-col :span="20">
          <el-input placeholder="输入关键词" v-model="r_kw"></el-input>
        </el-col>
        <el-col :span="4" class="myTextAlignRight">
          <el-button type="primary" class="myBgGreen" @click="onSearchExaminer">查询</el-button>
        </el-col>
      </el-row>
      <div class="mymarginTop_10px">
        <el-tree
          class="myOV_y_400px" 
          ref="dutyDlg"
          v-loading="dutyDlgListLoading"
          :data="dutyDlgList"
          :props="dutyDlgProps"
          node-key="staff_id"
          @check-change="onChange"
          :render-content="renderContent"
          show-checkbox>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="newRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="onAssignSub">提 交</el-button>
      </div>
    </el-dialog>
    <!--指派人员弹出框 end-->

  </div>
</template>  

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myHeadeTitle{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 5px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom:10px; 
  }
  .myHeadeTitle:before,.myHeadeTitle:after{
    content: " ";
    display: block;
    clear: both;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myLineHeight_35px{
    line-height: 35px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myPadding_20px{
    padding: 20px;
  }
  .myDialogSearchText{
    width: 360px;
  }
  .myLineHeight_45px{
    line-height: 45px;    
  }
  .myOV_y_400px{
    max-height: 400px;
    min-height: 200px;
    overflow-y:scroll;
    border:1px solid #f2f2f2;
  }
  .myColorRed{
    color: #f00;
    font-weight: 500;
  }
  .mymarginTop_10px{
    padding-top: 10px;
  }
</style>

<script>
  import { extractAreaIds , onSetArea } from '@/utils/misc';
  import { getMyTaskList , getHistoryList , taskStatus , setDealuser} from '@/api/maintenanceplan';
  import { getRegion } from '@/utils/localstorage';
  import { getStaffList } from '@/api/staff';
  export default {
     data(){
      return{
        kw:"",
        loading:false,
        modelValue:"",
        modelOptions:[],
        tableData: [],
        page_num:null,
        page_size:null,
        total:null,
        newRoleDialogVisible:false,
        searchKW:"",
        regionOptions: [],
        regionOptSelected: [],
        tableDataList:[],
        planOptions:[{label:"未启用",value:"-2"},
                      {label:"未分配",value:"-1"},
                      {label:"未处理",value:"0"},
                      {label:"处理中",value:"1"},
                      {label:"待检查",value:"2"},
                      {label:"待整改",value:"3"},
                      {label:"整改中",value:"4"},
                      {label:"整改待核查",value:"5"},
                      {label:"已完成",value:"6"},
                      {label:"逾期",value:"7"}],
        planValue:"",
        dutyDlgList:[],
        dutyDlgProps: {
          children: 'children',
          label: 'user_name'
        },
        dutyDlgListLoading:false,
        area_id:"",
        plan_id:"",
        status:"",
        taskStatus:taskStatus,
        dutyName:"",
        dutyId:"",
        id:"",
        r_kw:"",
        date_type:"",
        timetypeList:[{label:"开始日期",value:"1"},{label:"截止日期",value:"2"}],
        time:''
      }
    },
    components: {
    },
    filters: {
      taskStatusText: function(value) {
        return taskStatus[value];
      },
      overdue_days: function(value){
        if(value==0){
          return "否";
        }else{
          return `${value}天`;
        }
      }
    },
    computed: {
      areaIds() {
        return extractAreaIds(this.regionOptSelected, this.regionOptions);
      }
    },
    mounted(){
      document.title = '任务管理';
      this.regionOptions = getRegion();
      this.regionOptSelected.push(this.regionOptions[0].value,this.regionOptions[0].children[0].value,this.regionOptions[0].children[0].children[0].value);
      
      this.onGetMyTaskList();
      this.onGetHistoryList();
    },
    methods:{
      onSearchKW:function(val){

      },
      onGetMyTaskList:function(){//根据用户id拉取维保任务列表数据
        let vm=this;
        // this.area_id=this.areaIds;//小区id
        // this.plan_id=this.modelValue;//计划id
        // this.status=this.planValue;//状态
        // this.kw=this.kw;//关键词
        vm.loading=true;
        const params = {//请求列表数据是带上拉取的条数及搜索的关键词
          area_id: vm.areaIds,
          plan_id: vm.modelValue,
          status: vm.planValue,
          keyword: vm.kw,
          page_num: vm.page_num,
          page_size: vm.page_size,
          date_type: vm.date_type,
          start_time: vm.time?vm.time[0]:'',
          end_time: vm.time?vm.time[1]:''
        };
        getMyTaskList(params)
        .then(response => {
          let res = response.data;
          vm.tableData = res.rows;
          vm.total = res.total;
          vm.page_num = res.page_num;
          vm.page_size = res.page_size;
          vm.loading=false;
          // console.log("拉取我的维保任务列表成功",res.rows);
        }).catch(error => {
          vm.loading=false;
          console.log("拉取我的维保任务列表失败",error);
        })
      },
      onGetHistoryList(){//获取计划列表
        let vm=this;
        let user_id=window.localStorage.getItem("user_id"); 
        const params = {
          page_num: 1,
          page_size: 999999
        };
        getHistoryList(user_id, params).then(response => {
          let res = response.data;
          vm.tableDataList = res.rows;
          // console.log("维保计划列表",vm.tableDataList)
        }).catch(error => {
          console.log(error)
        })
      },
      handleSizeChange(val) {//每页条数控制
        this.page_size = val;
        this.onGetMyTaskList();
      },
      handleCurrentChange(val) {//每页
        let vm=this;
        let wbrwglConfig=window.sessionStorage.getItem("wbrwglConfig");
        if(wbrwglConfig){
          let config=JSON.parse(wbrwglConfig);
          vm.regionOptSelected=onSetArea(vm.regionOptions,config.area_id);
          vm.modelValue=config.modelValue;
          vm.planValue=config.planValue;
          vm.kw=config.kw;
          vm.date_type=config.date_type;
          vm.time=config.time;
          vm.page_num = Number(config.page_num);
          window.sessionStorage.removeItem("wbrwglConfig");
        }else{
          vm.page_num = val;
        }
        this.onGetMyTaskList();
      },
      onAssign(id){//指派执行人
        this.id=id;
        this.fetchStaff();
        this.newRoleDialogVisible = true;
      },
      fetchStaff() {//获取人员列表
        let vm = this;
        this.dutyDlgListLoading = true;
        let params = {
          kw:vm.r_kw,
          is_fuzzy:true,
          page_num: 1,
          page_size: 10000,
          ril: 'S',
          area_id:vm.areaIds
        };
        getStaffList(params)
        .then(response => {
          vm.dutyDlgList = response.data.rows;
          // console.log(vm.dutyDlgList)
          vm.dutyDlgListLoading = false;
        })
        .catch(error => {
          vm.dutyDlgListLoading = false;
        })
      },
      onChange(a,b,c){
        let vm=this;
        if(b){
          vm.$refs.dutyDlg.setCheckedKeys([]);
          vm.$refs.dutyDlg.setCheckedKeys([a.staff_id]);
        }else{
          vm.$refs.dutyDlg.setCheckedKeys([]);
        }
      },
      renderContent:function(createElement, { node, data, store }) {
        var vm = this;
        return createElement(
          'div', 
          {
            attrs:{
              style:"width:100%",
              title:`联系方式：${node.data.phone}`
            }
          },
          [
            createElement('span', node.label),
            createElement('span', 
              {attrs:{
                style:"float: right; margin-right: 20px"
              }},
              `${node.data.dept_name}`
            )
          ]
        );
      },
      onSearchExaminer(){
        this.fetchStaff();
      },
      onAssignSub(){
        let vm=this;
        var duty = vm.$refs.dutyDlg.getCheckedNodes();
        if (duty.length > 0) {
          vm.dutyName = duty[0].user_name;
          vm.dutyId = duty[0].staff_id;
        }       
        const params={
          id:vm.id,//任务id,
          deal_userid:vm.dutyId//人员id
        }
        console.log(params)
        setDealuser(params).then(response =>{
          let res=response.data;
          // console.log("指派执行人成功",res);
          vm.onGetMyTaskList();
        }).catch(error =>{
          console.log("指派执行人失败",error);
        })
        vm.newRoleDialogVisible = false;
      },
      onSearch:function(){//搜索
        //console.log("搜索信息",this.areaIds,this.modelValue,this.planValue,this.kw);
        
        this.onGetMyTaskList();
      },
      onDetailed:function(id){//查看
        let vm=this;
        let wbrwglConfig={
          area_id: vm.areaIds,
          modelValue: vm.modelValue,
          planValue: vm.planValue,
          kw: vm.kw,
          page_num: vm.page_num,
          date_type: vm.date_type,
          time: vm.time
        }
        window.sessionStorage.setItem("wbrwglConfig",JSON.stringify(wbrwglConfig));
        vm.$router.push({
          path:'/wbrwglxx',
          query: {type: 'info',id:id}
        })
      },
      onInspect:function(task_id,task_type){//检查
        let vm=this;
        let wbrwglConfig={
          area_id: vm.areaIds,
          modelValue: vm.modelValue,
          planValue: vm.planValue,
          kw: vm.kw,
          page_num: vm.page_num,
          date_type: vm.date_type,
          time: vm.time
        }
        window.sessionStorage.setItem("wbrwglConfig",JSON.stringify(wbrwglConfig));
        this.$router.push({
          path:'/wbrwgljc',
          query: {type: 'info',id:task_id,task_type:task_type}
        })
      },
      onCount:function(){//统计
        this.$router.push({
          path:'/taskManagementCount',
          query: {}
        })
      },
      onPush:function(){//逾期推送
        this.$router.push({
          path:'/push',
          query: {}
        })
      }
    }

  }

</script>  



